import { FC, useContext, useMemo, useState } from "react";
import { ConfigurePageContext } from "../../ConfigurePage";
import { SwiperItem } from "../../ConfigurePageType";
import { CommonModuleProps } from "../PreviewDevice";
import { ModuleCarousel } from "./components/ModuleCarousel";


const SwiperModule: FC<CommonModuleProps> = ({ className, index }) => {
	const [activeIndex, setActiveIndex] = useState(0);
	const swiperItemStyle = {
		width: "calc(22vw - 16px)",
		height: "24vh",
	};
	const { content } = useContext(ConfigurePageContext);
	const list = useMemo(() => content[index].list, [content, index]);
	return (
		<div className={`${className || ""}`} style={swiperItemStyle}>
			{list.length === 0 ? (
				<div style={swiperItemStyle} className="flex justify-center items-center text-gray-500">
					暂无轮播~
				</div>
			) : (
				<>
					<ModuleCarousel activeIndex={activeIndex} setActiveIndex={setActiveIndex} list={list}>
						{(list as SwiperItem[]).map((item, index) => (
							<div key={index}>
								<img
									className="object-cover object-center"
									style={{
										width: "calc(22vw - 16px)",
										height: "24vh",
									}}
									src={`${process.env.REACT_APP_BASEURL}${item.src}`}
								/>
							</div>
						))}
					</ModuleCarousel>
				</>
			)}
		</div>
	);
};
export default SwiperModule;